/**
 * @description 定义全局组件的插件
 */

// 定义一个处理时间的通用方法
export let dateFormat = function (val, str) {
  // 获取形参
  // console.log(arguments)

  // 获取到的是一个时间字符串，需要转为一个时间对象
  let _d = new Date(val || Date.now()),
    YYYY = _d.getFullYear(),
    MM = _d.getMonth() + 1,
    DD = _d.getDate(),
    hh = _d.getHours(),
    mm = _d.getMinutes(),
    ss = _d.getSeconds()

  // 需要把一位的数字转为两位
  MM = MM > 9 ? MM : `0${MM}`
  DD = DD > 9 ? DD : `0${DD}`
  hh = hh > 9 ? hh : `0${hh}`
  mm = mm > 9 ? mm : `0${mm}`
  ss = ss > 9 ? ss : `0${ss}`

  // 需要把这些数据整理为一个对象
  let obj = {
    YYYY,
    MM,
    DD,
    hh,
    mm,
    ss
  }

  // 需要把处理后的数据返回去
  return str.replace(/(YYYY)|(MM)|(DD)|(hh)|(mm)|(ss)/g, function (_s) {
    return obj[_s]
  })
}

// 引入组件，然后注册为一个全局组件
import MainLayout from './mainLayout'

// 插件有两种定义方法：函数插件、对象插件
// 在插件中，所有的全局注册都是一个一个的注册，不能一次性注册多个
function plugin(VueConstructor) {

  // 注册全局布局组件
  VueConstructor.component('MainLayout', MainLayout)

  // 注册一个过滤器 -- 第一个参数是过滤器的名字，第二个参数是过滤器的实现方法
  VueConstructor.filter('dateFormat', dateFormat)

  // 注册一个指令 -- 第一个参数是指令的名字，第二个参数是过滤器的实现方法，也可以是一个对象(实现指令的生命周期)
  VueConstructor.directive('format', {
    // inserted: function(el, bindData, newDom, oldDom) {
    inserted(el, bindData, newDom, oldDom) {

      // 可以调用通用方法来获取时间
      let res = dateFormat(bindData.value, 'MM月DD日 hh时mm分')

      // 它是把所有的东西都给到开发，需要开发去对虚拟dom进行渲染等控制
      // 可以给元素赋值
      el.innerText = `提货时间：${res}`
    }
  })
  // VueConstructor.directive('format', function(el, bindData, newDom, oldDom) {

  //     // 获取绑定到指令的数据
  //     let _d = new Date(bindData.value),
  //         YYYY = _d.getFullYear(),
  //         MM = _d.getMonth() + 1,
  //         DD = _d.getDate(),
  //         hh = _d.getHours(),
  //         mm = _d.getMinutes(),
  //         ss = _d.getSeconds()

  //     // 需要把一位的数字转为两位
  //     MM = MM > 9 ? MM : `0${MM}`
  //     DD = DD > 9 ? DD : `0${DD}`
  //     hh = hh > 9 ? hh : `0${hh}`
  //     mm = mm > 9 ? mm : `0${mm}`
  //     ss = ss > 9 ? ss : `0${ss}`

  //     // 需要把这些数据整理为一个对象
  //     let obj = {YYYY, MM, DD, hh, mm, ss}

  //     // 需要把处理后的数据返回去
  //     // return `${YYYY}年${MM}月${DD}日 ${hh}时${mm}分${ss}秒`
  //     // return `${MM}月${DD}日 ${hh}时`
  //     // return `${MM}-${DD} ${hh}`
  //     let res = 'MM月DD日 hh时'.replace(/(YYYY)|(MM)|(DD)|(hh)|(mm)|(ss)/g, function(_s) {
  //             return obj[_s]
  //         })

  //     // 它是把所有的东西都给到开发，需要开发去对虚拟dom进行渲染等控制
  //     // 可以给元素赋值
  //     el.innerText = `提货时间：${res}`
  // })
}

// 导出默认插件对象
export default plugin
